<template>
  <el-dialog
    z-index="3000"
    v-if="visible"
    title="个人中心"
    top="2vh"
    append-to-body
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    :visible.sync="visible"
    :before-close="close"
    width="80%"
  >
    <div class="wp-user">
      <div class="wp-user__sidebar">
        <div class="item_avatar">
          <el-avatar
            :size="40"
            :src="userInfo.avatar"
            @error="errorHandler">
            {{userInfo.employeeName?userInfo.employeeName.substring(1):''}}
          </el-avatar>
          <div>{{ userInfo.employeeName }}</div>
        </div>
        <ul class="wp-nav-list">
          <li
            class="wp-nav-list__item"
            @click="active('EditUserInfo')"
            :class="{ is_active: activeModel === 'EditUserInfo' }"
          >
            <span class="wp wp-icon-user"></span>
            <span class="text">个人信息</span>
          </li>
          <li
            class="wp-nav-list__item"
            @click="active('EditUserPassword')"
            :class="{ is_active: activeModel === 'EditUserPassword' }"
          >
            <span class="wp wp-icon-pwd"></span>
            <span class="text">账号密码</span>
          </li>
        </ul>
      </div>
      <div class="wp-user__setting">
        <component :is="activeModel" :data="userInfo" @afterSave="close"></component>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { getUserInfoAPI } from '@/api/user/userCenterAPI'
import EditUserInfo from './components/EditUserInfo'
import EditUserPassword from './components/EditUserPassword'
export default {
  name: 'UserCenter',
  props: { show: { type: Boolean, default: false }, data: Object },
  watch: {
    show (val) {
      this.visible = val
    },
    visible (val) {
      this.$emit('update:show', val)
    },
    data: {
      handler (val) {
        this.userInfo = val
      },
      deep: true,
      immediate: true
    }
  },
  components: { EditUserInfo, EditUserPassword },
  data () {
    return {
      visible: this.show,
      activeModel: 'EditUserInfo',
      userInfo: {}
    }
  },
  created () {
    this.getUserDetailInfo(this.data.userId)
  },
  methods: {
    errorHandler () {
      return true
    },
    getUserDetailInfo (userId) {
      getUserInfoAPI(userId).then(res => {
        this.userInfo = res.data || {}
        if (res.data && res.data.departmentInfoList) {
          this.userInfo.departmentNames = res.data.departmentInfoList.filter(obj => {
            return obj.parentCode !== '0'
          }).map((obj) => {
            return obj.departmentName
          }).join(',')
        }
        if (res.data && res.data.positionInfoList) {
          this.userInfo.positionNames = res.data.positionInfoList.map((obj) => {
            return obj.positionName
          }).join(',')
        }
      })
    },
    active (model) {
      this.activeModel = model
    },
    close () {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.wp-user {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #f1f5f8;
  &__sidebar {
    min-width: 200px;
    height: 450px;
    margin-right: 20px;
    border-radius: 4px;
    background: #fff;
    .item_avatar {
      display: -webkit-box !important;
      -webkit-box-align: center;
      height: 50px;
      div {
        margin-left: 10px;
      }
    }
  }
  &__setting {
    // background: #fff;
    height: 450px;
    overflow: auto;
    width: 100%;
  }
}
.wp-nav-list {
  width: 100%;
  &__item {
    height: 50px;
    color: #666;
    padding: 0 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    cursor: pointer;
    &.is_active {
      background: #f1f5f8;
    }
    &:hover {
      background: #f1f5f8;
    }
    .wp {
      margin-right: 10px;
    }
  }
}
</style>
